<!DOCTYPE html>
<html>
<head>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style>
#div2 {
    motion: none 50% auto 400grad;
}
#div3 {
    motion: path('M 10 20 h 30 v 150') 0rad 70px;
}
#div4 {
    motion: 10px 90deg reverse none;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
<span id="span1" style="motion: path('M 1 2 V 3') 4px 5deg"></span>
<script>
"use strict";

test(function() {
    assert_equals(getComputedStyle(div1, null).motionPath, 'none');
    assert_equals(getComputedStyle(div1, null).motionPosition, '0px');
    assert_equals(getComputedStyle(div1, null).motionRotation, 'auto 0deg');
    assert_equals(getComputedStyle(div1, null).motion, 'none 0px auto 0deg');
    assert_equals(getComputedStyle(div1, null).transform, 'none');
}, 'motion default is none 0px auto 0deg');

test(function() {
    assert_equals(getComputedStyle(div2, null).motionPath, 'none');
    assert_equals(getComputedStyle(div2, null).motionPosition, '50%');
    assert_equals(getComputedStyle(div2, null).motionRotation, 'auto 360deg');
    assert_equals(getComputedStyle(div2, null).motion, 'none 50% auto 360deg');
    assert_equals(getComputedStyle(div2, null).transform, 'none');
}, 'motion supports various angle units');

test(function() {
    assert_equals(getComputedStyle(div3, null).motionPath, "path('M 10 20 h 30 v 150')");
    assert_equals(getComputedStyle(div3, null).motionPosition, '70px');
    assert_equals(getComputedStyle(div3, null).motionRotation, '0deg');
    assert_equals(getComputedStyle(div3, null).motion, "path('M 10 20 h 30 v 150') 70px 0deg");
    assert_equals(getComputedStyle(div3, null).transform, 'matrix(1, 0, 0, 1, 0, 0)');
}, 'motion supports SVG path data');

test(function() {
    assert_equals(getComputedStyle(div4, null).motionPath, 'none');
    assert_equals(getComputedStyle(div4, null).motionPosition, '10px');
    assert_equals(getComputedStyle(div4, null).motionRotation, 'auto 270deg');
    assert_equals(getComputedStyle(div4, null).motion, 'none 10px auto 270deg');
    assert_equals(getComputedStyle(div4, null).transform, 'none');
}, 'motion property data can be supplied in any order');

test(function() {
    assert_equals(span1.style.motionPath, "path('M 1 2 V 3')");
    assert_equals(span1.style.motionPosition, '4px');
    assert_equals(span1.style.motionRotation, '5deg');
    assert_equals(span1.style.motion, "path('M 1 2 V 3') 4px 5deg");
    assert_equals(span1.style.transform, '');
}, 'motion style can be set inline');

</script>
</body>
</html>
